import Head from 'next/head';
import { Carousel } from 'react-responsive-carousel';
import React from 'react';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { Box, Heading, Text,Button } from '@chakra-ui/react';
import axios from 'axios';
import { baseURL } from '../axiosConfig';
import Link from 'next/link';

const CarouselItem = styled.div`
  position: relative;
  & > div{
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    color: #fff;
    padding-top: 80px;
    text-align: left;
    width: 100%;
    max-width: 1200px;
    &>p{
      margin: 10px 0;
      font-size: 14px;
      width: 250px;
    }
  }
  &>img{
    filter: brightness(.5);
  }
`

const swiperContainer = css`
  position: relative;
  &> .carousel:last-child {
    position: absolute;
    left: 0;
    bottom: 0;
    & > .thumbs-wrapper>.thumbs{
      display: flex;
      justify-content: center;
    }
  }
`

export default function Swiper({data}) {
  return <>
    <Head>
      <link rel='stylesheet' href='/css/carousel.min.css'></link>
    </Head>
    <Carousel css={swiperContainer} showArrows={false} showIndicators={false} showStatus={false}>
      {data.map(swiper=> (
        <CarouselItem key={swiper.id}>
          <img src={swiper.url} />
          <Box>
            <Heading as={'h2'} size='lg'>{swiper.title}</Heading>
            <Text>{swiper.description}</Text>
            <Button colorScheme={'red'}>
              <Link as={`/detail/${swiper.vid}`} href='/detail/[id]'>
                <a>CHECK DETAIL</a>
              </Link>
              </Button>
          </Box>
        </CarouselItem>
      ))}
    </Carousel>
  </>
}

export function loadSwiper(){
  return axios.get('/api/swiper',{baseURL})
}